<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin:0px;
			}
			.scale{
				width: 420px;
				position: relative;
				left: 50px;
				top: 30px;
			}
			.scale .smallpic{
				width: 418px;
				height: 418px;
				border: 1px solid #ccc;
				position: relative;
			}
			.scale .smallpic img{
				width: 418px;
				height: 418px;
				display: block;
			}
			.scale .smallpic .samllscale{
				background: orange;
				opacity: 0.5;
				position:absolute;
				left:0px;
				top:0px;
				visibility: hidden;
				cursor: move;
			}
			.scale .bigscale{
				width: 420px;
				height: 420px;
				border: 1px solid #ccc;
				position: absolute;
				left: 430px;
				top: 0;
				overflow: hidden;
			}
			.scale .bigscale .bigpic{
				width: 836px;
				height: 836px;
				display: block;
				position: absolute;
			}
			.scale .spic{
				border: 1px solid #666;
				text-align: center;
				font-size: 0;
				margin-top: 5px;
			}
			.scale .spic img{
				width: 75px;
				height: 75px;
				border: 1px solid #999;
				margin: 2px;
			}
		</style>
	</head>
	<body>
		<div class="scale">
			<div class="smallpic">
				<img src="./images/pic1.jpg"/>
				<div class="samllscale"></div>
			</div>
			<div class="bigscale">
				<img src="./images/pic1.jpg" class="bigpic"/>
			</div>
			<div class="spic">
				<img src="./images/pic1.jpg">
				<img src="./images/pic2.jpg">
				<img src="./images/pic3.jpg">
				<img src="./images/pic4.jpg">
				<img src="./images/pic5.jpg">
			</div>
		</div>
		
		<script type="text/javascript">
			function Magnifying(){
				
			//1.获取元素
			this.scale=document.querySelector('.scale');
			this.smallpic=document.querySelector('.smallpic');
			this.smallpicimg=document.querySelector('.smallpic img');
			this.samllscale=document.querySelector('.samllscale');
			this.bigscale=document.querySelector('.bigscale');
			this.bigpic=document.querySelector('.bigpic');
			this.spicimg = document.querySelectorAll(".spic img");


            //2.鼠标经过小图显示小放和大放的方法
			Magnifying.prototype.aaa=function(){
				this.samllscale.style.visibility='visible';
				this.bigscale.style.visibility='visible';
			}
	        //3.求小放的宽高
			//公式：小放/大放=小图/大图
			Magnifying.prototype.bbb=function(_this){
				//公式：小放/大放=小图/大图
				this.samllscale.style.width=this.bigscale.offsetWidth*_this.offsetWidth/this.bigpic.offsetWidth+'px';
				this.samllscale.style.height=this.bigscale.offsetHeight*_this.offsetHeight/this.bigpic.offsetHeight+'px';

			}
			Magnifying.prototype.ddd=function(l,t,_that){
			//5.求比例>1
			var bili=this.bigpic.offsetWidth/_that.offsetWidth;
			this.bigpic.style.left=-bili*l+'px';
			this.bigpic.style.top=-bili*t+'px';

			}

			Magnifying.prototype.ccc=function(ev,_this){
				
					var l=ev.clientX-this.scale.offsetLeft-this.samllscale.offsetWidth/2;
					var t=ev.clientY-this.scale.offsetTop-this.samllscale.offsetHeight/2;
					
					
					
					if(l<0){
						l=0;
					}
					if(l>=_this.offsetWidth-this.samllscale.offsetWidth-2){
						l=_this.offsetWidth-this.samllscale.offsetWidth-2;
					}
					
					if(t<0){
						t=0;
					}
					if(t>=_this.offsetHeight-this.samllscale.offsetHeight-2){
						t=_this.offsetHeight-this.samllscale.offsetHeight-2;
					}
					this.samllscale.style.left=l+'px';
					this.samllscale.style.top=t+'px';
						
					//6.赋值，注意方向
				
					this.ddd(l,t,_this)


			}

			Magnifying.prototype.eee=function(){
				this.samllscale.style.visibility='hidden';
				this.bigscale.style.visibility='hidden';

			}
			Magnifying.prototype.fff=function(_this){
				this.smallpicimg.src = _this.src;
				this.bigpic.src = _this.src;

			}
			




			Magnifying.prototype.init=function(){
				console.log(this)
			//2.鼠标经过小图显示小放和大放。
			    let that=this;
			    this.smallpic.onmouseover=function(){
					console.log(this)
					that.aaa()
		
				
				//3.求小放的宽高
				that.bbb(this)

				

				
				//4.让小放跟随鼠标移动
				this.onmousemove=function(ev){
					var ev=ev||window.event;
					that.ccc(ev,this)

					// console.log(l,t)
				
				}
				
			}
			this.smallpic.onmouseout=function(){
				that.eee()
				
			}
			
			for(var i=0;i<that.spicimg.length;i++){
				that.spicimg[i].onclick = function(){
				that.fff(this)
				}
			}

			}
		}

			let mag = new Magnifying();
			console.log(mag);
			mag.init();

			</script>
	</body>
</html>
